//清除用户登录状态
$(() => {
    var username = getCookie('username');
    if (username) {
        removeCookie('username');
    }
})
//定义登录注册状态的变量
var rStatus = false;
//定义输入状态的变量
var uStatus = false, pStatus = false, uTxt = false, pTxt = false;
if (location.hash === '#reg') {
    rStatus = true;
    reg();
}
//初始化输入区
reEdit();
//给登录&注册绑定点击事件
$('.regTxt').click(() => {
    reg();
    location.hash = '#reg';
})
$('.logTxt').click(() => {
    log();
    location.hash = '#log';
})
function reg() {
    $('.underline').css({
        left: "52px"
    });
    $('.logTxt').css({
        color: "rgb(187,187,187)"
    });
    $('.regTxt').css({
        color: "rgb(0,0,0)"
    });
    $('.user').text('邮箱/手机号码');
    $('.pwd').text('密码(6~20位)');
    $('input[type=button]').val('注册');
    $('.areaFooter').css({
        visibility: 'hidden'
    })
    rStatus = true;
    reEdit();
}
function log() {
    $('.underline').css({
        left: "0px"
    });
    $('.logTxt').css({
        color: "rgb(0,0,0)"
    });
    $('.regTxt').css({
        color: "rgb(187,187,187)"
    });
    $('.user').text('邮箱/手机号码/小米ID');
    $('.pwd').text('密码');
    $('input[type=button]').val('登录');
    $('.areaFooter').css({
        visibility: 'inherit'
    })
    rStatus = false;
    reEdit();
}
//给输入框添加鼠标移入移出事件
$('.userinput').mouseover(() => {
    $('.user').css({
        top: '10px',
        fontSize: '12px',
    })
})

$('.userinput').mouseout(() => {
    if ($('input[type=text]').val()) return;
    $('.user').css({
        top: '21px',
        fontSize: '18px',
    });
})

$('.pwdinput').mouseover(() => {
    $('.pwd').css({
        top: '10px',
        fontSize: '12px',
    })
})

$('.pwdinput').mouseout(() => {
    if ($('input[type=password]').val()) return;
    $('.pwd').css({
        top: '21px',
        fontSize: '18px',
    })
})
//给输入框添加输入事件
function uInput() {
    if (!$('input[type=text]').val()) return;
    uTxt = true;
    if (uTxt && pTxt) {
        $('input[type=button]').css({
            backgroundColor: 'rgb(255, 92, 0)',
            cursor: 'pointer'
        })
    } else {
        $('input[type=button]').css({
            backgroundColor: 'rgb(255, 190, 153)',
            cursor: 'default'
        })
    }
}
function pInput() {
    if (!$('input[type=password]').val()) {
        $('input[type=button]').css({
            backgroundColor: 'rgb(255, 190, 153)',
            cursor: 'default'
        })
        return;
    }
    else {
        pTxt = true;
        console.log(111);
        if (uTxt && pTxt) {
            $('input[type=button]').css({
                backgroundColor: 'rgb(255, 92, 0)',
                cursor: 'pointer'
            })
        } else {
            $('input[type=button]').css({
                backgroundColor: 'rgb(255, 190, 153)',
                cursor: 'default'
            })
        }
    }
}
//给输入框添加获取焦点事件
$('input[type=text]').focus(() => {
    $('.user').css({
        top: '10px',
        fontSize: '12px',
    })
})
$('input[type=password]').focus(() => {
    $('.pwd').css({
        top: '10px',
        fontSize: '12px',
    })
})
//给输入框添加失去焦点事件
$('input[type=text]').blur(() => {
    if (!rStatus) {
        if (!$('input[type=text]').val()) {
            $('#uTips').text('请输入帐号');
            $('.user').css({
                color: 'rgb(240, 70, 69)'
            })
            uStatus = false;
        } else {
            $('#uTips').text('');
            $('.user').css({
                color: '#838383'
            })
            uStatus = true;
        }
    } else {
        let reg = /^[1][3|4|5|7|8|9]\d{9}$/;
        let reg2 = /^\w+@\w+\.[a-z]+$/;
        if (reg.test($('input[type=text]').val()) || reg2.test($('input[type=text]').val())) {
            $('.user').css({
                color: '#838383'
            });
            $('#uTips').text('');
            uStatus = true;
        } else {
            $('#uTips').text('账号格式不正确,必须为手机号或邮箱');
            $('.user').css({
                color: 'rgb(240, 70, 69)'
            })
            uStatus = false;
        }
    }
    if ($('input[type=text]').val()) return;
    $('.user').css({
        top: '21px',
        fontSize: '18px',
    });
})
$('input[type=password]').blur(() => {
    if (!rStatus) {
        if (!$('input[type=password]').val()) {
            $('#pTips').text('请输入登录密码');
            $('.pwd').css({
                color: 'rgb(240, 70, 69)'
            })
            pStatus = false;
        } else {
            $('#pTips').text('');
            $('.pwd').css({
                color: '#838383'
            })
            pStatus = true;
        }
    } else {
        let reg = /^[\w]{6,20}$/;
        if (reg.test($('input[type=password]').val())) {
            $('.pwd').css({
                color: '#838383'
            });
            $('#pTips').text('');
            pStatus = true;
        } else {
            $('#pTips').text('密码格式不正确,必须是字母数字下划线组成');
            $('.pwd').css({
                color: 'rgb(240, 70, 69)'
            })
            pStatus = false;
        }
        if (uStatus && pStatus) {
            $('input[type=button]').css({
                backgroundColor: 'rgb(255, 92, 0)',
                cursor: 'pointer'
            })
        } else {
            $('input[type=button]').css({
                backgroundColor: 'rgb(255, 190, 153)',
                cursor: 'default'
            })
        }
    }
    if ($('input[type=password]').val()) return;
    $('.pwd').css({
        top: '21px',
        fontSize: '18px',
    });
})
/* 提交 */
// 给按钮绑定点击事件
$('input[type=button]').click(() => {
    submit();
})
// 监听键盘按下事件
$(document).keydown((e) => {
    if (e.keyCode == 13) {
        submit();
    }
})
function submit() {
    if (rStatus) {
        var sUrl = './php/register.php';
    } else {
        var sUrl = './php/login.php';
    }
    // 获取输入框的值
    let username = $('input[type=text]').val();
    let password = $('input[type=password]').val();
    //发送Ajax请求
    var loadindex = layer.load(0, {
        shade: [0.9, "#000"]
    })
    $.get({
        url: sUrl,
        data: {
            username: username,
            password: password
        },
        success: res => {
            var { meta: { status, msg } } = JSON.parse(res);
            layer.close(loadindex);
            if (status === 1) {
                layer.msg(msg, {
                    icon: 1,
                    time: 1500
                }, () => {
                    var url = localStorage.getItem('url');
                    setCookie('username', $('input[type=text]').val(), 7200);
                    if (url) {
                        localStorage.removeItem('url')
                        location.href = url
                    }
                    else location.href = "index.html"
                })
            } else { 
                layer.msg(msg, {
                    icon: 2,
                    time: 1500
                })
            }
        }
    })
}
//封装初始化函数
function reEdit() {
    uStatus = false;
    pStatus = false;
    $('.user').css({ color: '#838383' });
    $('.pwd').css({ color: '#838383' });
    $('input[type=text]').val('');
    $('input[type=password]').val('');
    $('#uTips').text('')
    $('#pTips').text('')
    $('input[type=button]').css({
        backgroundColor: 'rgb(255, 190, 153)',
        cursor: 'default'
    })
}